<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝首页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            vertical-align: middle;
        }
body{
    background-image: url(3.jpg);
}
        body {
            background-color: #ffffff;
        }

        a:hover {
            color: orangered
        }

        a {
            color: rgb(109, 108, 108);
            text-decoration: none;
            text-align: center;
        }

        .ym {
            float: left;
            width: 100%;
            height: 35px;
            background-color: #cccccc;
            font-size: 5px;
        }

        .ym_1 {
            float: left;
            margin-left: 200px;
            height: 100%;
            color: orangered;
            margin-top: 8px;
        }

        .ym_2 {
            
            margin-left: 20px;
            float: left;
            height: 100%;
            margin-top: 8px;
            color: rgb(109, 108, 108);
        }
    .xi{
        margin-top: 50px;

    }
    .li{
        color: #666;
        list-style-type: none;
    }
    .xl{
        border: none;
        background-color: #cccccc;
        cursor: pointer;
    }
    .xly{
        position: relative;
        display: inline-block;
         margin-left: 20px;
            float: left;
            height: 100%;
            margin-top: 8px;
            
    
    }
    .xlyy{
        display: none;
        position: absolute;
        background-color: #cccccc;
        min-width: none;
        
    }
    .xlyy a{
        
        text-decoration: none;
        display: block;
    }
    .xlyy a:hover{
        background-color: #f1f1f1;
    }
    .xly:hover .xlyy{

    display: block;
    }
    .xly:hover .xly{

display: block;
}
    </style>
</head>
<body>
    <div>
       
    </div>
    <div class="ym">
        <div class="xly" style="margin-left: 100px;"> 
           <button type="button"  class="xl">
                中国大陆▽
           </button>
        <div class="xlyy">
            <a href="">中国大陆</a>
            <a href="">外国大陆</a>
        </div>
        </div>
        <a href=""><div class="ym_1">亲，请登录</div></a> 
         <div class="ym_2"> <a href=""> 免费注册</a></div>
         <div class="ym_2"><a href="">手机逛淘宝</a></div>
         <div style="margin-left: 100px;float: left;height: 100%;margin-top: 8px;"><a href="">淘宝网首页</a></div>
         <div class="ym_2" >
             
                
                 <select  name="" id="" style="border: none;background-color: #cccccc;color: rgb(109, 108, 108);">
                     <option value="">我的淘宝</option>
                     <option value="">已买宝贝</option>
                     <option value="">我的足迹</option>
                 </select>
                
            </div>
         <div class="ym_2"><a href="">购物车</a></div>
         <div class="ym_2">
            <select  name="" id="" style="border: none;background-color: #cccccc;color: rgb(109, 108, 108);">
                <option value="">收藏夹</option>
                <option value="">收藏宝</option>
                <option value="">收藏足</option>
            </select>
         </div>
         <div class="ym_2"><a href="">商品分类</a></div>
         <div class="ym_2">
            <select  name="" id="" style="border: none;background-color: #cccccc;color: rgb(109, 108, 108);">
                <option value="">卖家中心</option>
                <option value="">免费开店</option>
                <option value="">问店友</option>
            </select>
         </div>
         <div class="ym_2">
            <select  name="" id="" style="border: none;background-color: #cccccc;color: rgb(109, 108, 108);">
                <option value="">联系客服</option>
                <option value="">消费客服</option>
                <option value="">客服大厅</option>
            </select>
         </div>
         <div class="ym_2"><a href="">网站导航</a></div>
     </div>

     <div style="height: 30px;width: 50px;"></div>

     <div style="height: 30px;width: 60px;"></div>
     
<div style="margin-left: 10%;float: left;"><img src="logo.png" alt="" ></div>
   <div style="float: left; display: inline-block;border: 2px solid #fc7201;border-radius: 35px;height: 40px;background-color: white;">
    
    <select name="" id="" style="border:none;">
        <option value="">
           宝贝
        </option>
    </select>
<input type="text" placeholder="搜索" style="width: 600px;border: none;border-radius: 35px;height: 30px;padding: 5px 10px  5px  10px;">
<input type="text" value="搜索商品" style="color: white;font-size: 18px;border: none;background-image: linear-gradient(to right,#ff9810 0,#e95510 100%);border-radius: 35px;width: 80px;height: 30px;">
   </div>
  
   
  <div class="xi"> 
   <div style="font-size: 5px;float: none;">
    <a href="">新款连衣裙</a>
    <a href="">三件套</a>
    <a href="">时尚女鞋</a>
    <a href="">短裤</a>
    <a href="">半身裙</a>
    <a href="">新款男鞋</a>
    <a href="">沙发</a>
    <a href="">墙纸</a>
    <a href="">时尚男包</a>
    <a href="">新款连衣裙</a>
    <a href="">三件套</a>
    <a href="">时尚女鞋</a>
    <a href="">短裤</a>
    <a href="">半身裙</a>
    <a href="">新款男鞋</a>
    <a href="">沙发</a>
    <a href="">墙纸</a>
    <a href="">时尚男包</a>

</div>
</div>

<div style="margin-left: 75%;margin-top: -60px;">
       <img src="2.jpg" alt="" id="img">
   </div>
   
   <div style="margin-left: 15%;font-size: 15px;color: orangered;float: left;">
<span>主题市场</span>
   </div>
   <div style="margin-left: 5%;font-size: 15px;float: left;">
   <a href="" style="color: red;"> 天猫</a>
       </div>
       <div style="margin-left: 20px;font-size: 15px;float: left;">
       <a href="" style="color:rgb(50, 173, 136) ;">聚划算</a> 
           </div>

           <div style="margin-left: 20px;font-size: 15px;float: left;">
       <a href="" style="color: rgb(30, 255, 0);">天猫超市</a> 
               </div>
               <div style="float: left;margin-left: 20px;font-size: 2px;">
                   <span>|</span>
               </div>
               <div style="float: left;margin-left: 20px;font-size: 2px;">
            <a href=""> 司法拍卖</a>
            </div>
            <div style="float: left;margin-left: 20px;font-size: 2px;">
               <a href="">飞猪旅行</a> 
            </div>
            <div style="float: left;margin-left: 20px;font-size: 2px;">
              <a href="">>天天特卖</a> 
            </div>
            <div style="float: left;margin-left: 20px;font-size: 2px;">
            <a href="">淘小铺</a>    
            </div>
            <div style="float: left;margin-left: 20px;font-size: 2px;">
                <span>|</span>
            </div>
            <div style="float: left;margin-left: 20px;font-size: 2px;">
              <a href="">做点新货</a>  
            </div>
            <div style="float: left;margin-left: 20px;font-size: 2px;">
               <a href="">苏宁易购</a> 
            </div>
            <div style="float: left;margin-left: 20px;font-size: 2px;">
                <a href="">淘宝心选</a> 
             </div>
             <div style="float: left;margin-left: 20px;font-size: 2px;">
                <a href="">智能生活</a> 
             </div>
            

            <div style="height: 10px;"></div>
            <div style="background-color:white;height:520px;margin-top:30px;border-radius:15px;width: 1200px;margin-left: 5%;">

           
<div style="width: 200px;display: inline-block;margin-left: 20px;">
<ul style="list-style-type:none;font-size: 15px;color: rgb(107, 107, 107);line-height: 30px;">
    <li><a href="">女装</a>  / <a href="">内衣</a>  / <a href="">家居</a>    ></li>
    <li><a href="">女鞋 </a> / <a href="">男鞋</a> / <a href="">箱包</a>   ></li>
    <li><a href="">母婴</a> / <a href="">童装</a> /<a href="">玩具 </a>   ></li>
    <li><a href="">男装</a> / <a href="">户外运动</a>   ></li>
    <li><a href="">美妆</a> / <a href="">彩妆</a> / <a href="">个护 </a>  ></li>
    <li><a href="">手机 </a>/<a href="">数码</a>  /<a href="">企业 </a>   ></li>
    <li><a href="">大家电 </a>/ <a href="">生活电器</a>   ></li>
    <li> <a href="">零食</a>/ <a href="">生鲜</a> / <a href="">茶酒</a>   ></li>
    <li><a href="">女装</a>  / <a href="">内衣</a>  / <a href="">家居</a>    ></li>
    <li><a href="">女鞋</a> / <a href="">男鞋</a> /  <a href="">箱包</a>  ></li>
    <li> <a href="">母婴</a>/  <a href="">童装</a>/  <a href="">玩具</a>  ></li>
    <li><a href="">男装 </a>/ <a href="">户外运动</a>   ></li>
    <li> <a href="">美妆</a>/<a href=""> 彩妆</a> / <a href="">个护  </a> ></li>
    <li> <a href="">手机</a>/  <a href="">数码</a>/<a href=""> 企业</a>   ></li>
    <li> <a href="">大家电</a>/  <a href="">生活电器</a>  ></li>
    
</ul>

</div>
<div style="display: inline-block;">
    <img src="11.jpg" alt="" id="lb" style="width: 520px;height: 280px;border-radius: 15px;margin-top: -180px;margin-left: -50px;">
</div>
<div>
    <img src="4.jpg" alt="" style="width: 520px;height: 200px;border-radius: 15px;margin-top: -200px;margin-left: 175px;">
</div>
<div>
    <img src="5.jpg"  alt="" style="width: 160px;height: 270px;border-radius: 15px;margin-top: -730px;margin-left: 700px;">
</div>
<div>
    <img src="6.jpg"  alt="" style="width: 160px;height: 200px;border-radius: 15px;margin-top: -280px;margin-left: 700px;">
</div>
<div>
    <img src="7.jpg" alt="" style="width: 280px;height: 480px;border-radius: 15px;margin-top: -560px;margin-left: 880px;">
</div>
 </div></div>
 <script>
     
        var img=document.getElementById("img");
     img.onclick=function(){
         img.style.display="none";
     }
var index=0;
var images=['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg']
setInterval(function(){
    document.querySelector('#lb').src=images[index];
    index++;
    if(index==images.length){

        index=0
    }
},2000);
 </script>
</body>
</html>